<style include="privacy-review-fragment-shared">
  :host {
    display: flex;
    flex-flow: column;
    min-height: calc(432px - var(--privacy-guide-footer-total-height));
  }

  .headline-container {
    outline: none;
    padding: 48px 116px var(--cr-section-padding) 116px;
    row-gap: 12px;
  }

  .footer {
    align-items: center;
    bottom: calc(-1 * var(--privacy-guide-footer-total-height));
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--privacy-guide-footer-vertical-padding);
    position: absolute;
    width: calc(100% - 48px);  /* 48px = 2x :host horizontal padding */
  }
</style>
<div class="headline-container" focus-element tabindex="-1">
  <picture>
    <source
        srcset="./images/privacy_review/welcome_banner_dark.svg"
        media="(prefers-color-scheme: dark)">
    <img alt="" src="./images/privacy_review/welcome_banner.svg">
  </picture>
  <div class="headline">$i18n{privacyReviewWelcomeCardHeader}</div>
  <div class="cr-secondary-text">$i18n{privacyReviewWelcomeCardSubHeader}</div>
</div>
<div class="footer">
  <cr-button class="action-button" id="startButton"
      on-click="onStartButtonClick_">
    $i18n{privacyReviewNextButton}
  </cr-button>
</div>
